/**
 * Created by zzy on 2017/9/25.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    PixelRatio,
    Dimensions
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'
import DataUtil from '../util/DataUtil'
let {width,height} = Dimensions.get('window');

export default class TicketCell extends Component {

    constructor(props){
        super(props);
        this.state={
            selectModel:0,//套餐选择,
        }
    }

    render() {
        let {addShoppingCart,callback}=this.props;
        let tiket=this.props.data;
        return (<TouchableOpacity
            style={ticketCell.container}
            activeOpacity={1}
            onPress={callback}
        >
            <Image style={ticketCell.info} source={require('../../luoasserts/tiket/tiket_bg.png')}>
                <View style={ticketCell.info_icon}>
                    {/*<View style={ticketCell.border}>*/}
                        {/*<Text style={ticketCell.self}>自营</Text>*/}
                    {/*</View>*/}
                    {/*<Image style={ticketCell.icon}*/}
                           {/*source={require('../../luoasserts/tiket/tiket_water_icon.png')}></Image>*/}
                    <View style={{alignItems:'center',marginLeft:20}}>
                        <Text style={{fontSize:20,color:'#0371BD'}}>水</Text>
                        <Text style={{fontSize:20,color:'#0371BD'}}>票</Text>
                    </View>

                </View>
                <View style={ticketCell.info_name}>
                    <Text style={ticketCell.name}>{tiket.name}</Text>
                    <Text style={ticketCell.scale}>{tiket.volume}</Text>
                </View>
                <View style={ticketCell.info_msg}>
                    <View style={{alignItems:'center'}}>
                        <Text style={ticketCell.shuipiao}>{tiket.productItemModels[this.state.selectModel].baseCount+''}</Text>
                        <Text style={ticketCell.shuipiao}>张</Text>
                    </View>

                </View>
                <View style={{position:'absolute',right:20,bottom:20,backgroundColor:'#FF8853',padding:2}}>
                    <Text style={ticketCell.use}>{tiket.productItemModels[this.state.selectModel].name}</Text>
                </View>
                <Text style={{position:'absolute',left:20,bottom:20,color:'#0371BD',fontSize:13}}>每张换购1桶</Text>
            </Image>
            <View style={ticketCell.cutLine}></View>
            <View style={{flexDirection:'row',alignItems:'center',paddingLeft:10,paddingTop:10}}>
                <View style={[ticketCell.border, ticketCell.center, {marginRight: 5}]}>
                    <Text style={ticketCell.self}>自营</Text>
                </View>
                <Text style={{color:'black'}}>{tiket.name+tiket.volume}</Text>
            </View>
            <View style={ticketCell.price_info}>
                <Text style={ticketCell.price}>¥{DataUtil.f2y(tiket.productItemModels[this.state.selectModel].currentPrice)}</Text>
                <Text style={{marginLeft:20}}>已售:{tiket.productItemModels[this.state.selectModel].saleMount+''}</Text>
                {/*{*/}
                    {/*tiket.productItemModels.map((model,index)=>{*/}
                        {/*let bordercolor=this.state.selectModel==index?'#21ACEA':'gray';*/}
                        {/*return <TouchableOpacity style={[ticketCell.voucher_border,{borderColor:bordercolor}]} key={index} onPress={()=>{*/}
                            {/*this.setState({*/}
                                {/*selectModel:index*/}
                            {/*})*/}
                        {/*}}>*/}
                            {/*<Text style={{color:bordercolor,paddingHorizontal:5}}>{model.name}</Text>*/}
                        {/*</TouchableOpacity>*/}
                    {/*})*/}
                {/*}*/}
                <TouchableOpacity style={ticketCell.cart} onPress={()=>{addShoppingCart(tiket,this.state.selectModel)}}>
                    <Icon name="ios-cart-outline" size={24} color="red"/>
                </TouchableOpacity>
            </View>
        </TouchableOpacity>)
    }
}

const ticketCell = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        marginTop:10
    },
    info: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 10,
        margin: 10,
        width:width-30,
        height:150,
        resizeMode:'contain'
    },
    info_icon: {
        marginLeft: 10,
        alignItems:'center'
    },
    info_name: {
        flex: 1,
        alignItems: 'center'
    },
    info_msg: {
        marginRight: 20,
        alignItems:'center'
    },
    border: {
        borderWidth: 1 / PixelRatio.get(),
        borderColor: 'white',
        width:30
    },
    self: {
        fontSize: 10,
        color: 'white',
        textAlign: 'center',
    },
    shuipiao: {
        color: 'white',
        fontSize: 20

    },
    icon: {
        width: 65,
        height: 65,
        resizeMode: 'contain',
        marginTop: 5
    },
    name: {
        color: 'white',
        fontSize: 25
    },
    scale: {
        color: 'white',
        fontSize: 15,
        marginTop: 7
    },
    use: {
        color: 'white',
        fontSize: 13,
    },
    cutLine: {
        backgroundColor: 'gray',
        height: 1 / PixelRatio.get()
    },
    price_info:{
        flexDirection:'row',
        paddingTop:5,
        paddingLeft:10,
        paddingBottom:10,
        alignItems:'center'
    },
    price:{
        color:'red',
        fontSize:17
    },
    voucher_border:{
        borderWidth: 1 / PixelRatio.get(),
        marginLeft:10,
        justifyContent:'center',
    },
    voucher:{
        color:'gray',
    },
    cart:{
        flex:1,
        flexDirection:'row',
        justifyContent:'flex-end',
        paddingRight:10
    },
    self: {
        fontSize: 10,
        fontWeight: '100',
        color: 'red',
        textAlign: 'justify',
        textAlignVertical: 'center'
    },
    border: {
        borderWidth: 1 / PixelRatio.get(),
        borderColor: 'red'
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center'
    },
});